<!--
 * @Author: huangximian huangximian@e-ling.com.cn
 * @Date: 2022-05-26 18:12:58
-->
<template>
  <div class="header">
    <div class="header_top">
      <div></div>
      <div v-if="!second" @click="foldMenu($event)" v-html="routername"></div>
      <div v-else @click="foldMenu($event)">
        <img class="foldsrc" src="../../../../assets/icon/icon_feere.png" alt="" />
      </div>
    </div>
    <div
      :style="
        second
          ? 'transform: translate(0, 15rem);'
          : 'transform: translate(0, -32rem);'
      "
      class="fold"
    >
      <div v-for="item in menus" :key="item.id" class="fold_div">
        <p
          v-if="item.subMenus.length"
          :class="item.boole || $route.meta.biaoshi == item.name ? 'fold_trigger' : ''"
        >
          <span>{{ item.name }}</span
          ><img
            src="../../../../assets/icon/icon_fold.png"
            alt=""
            @click="secondaryMenu($event, item)"
          />
        </p>
        <p
          v-else
        >
          <router-link :class="$route.meta.biaoshi === item.name ? 'fold_trigger' : ''" :to="item.url">{{ item.name }}</router-link>
        </p>
        <div v-if="item.boole">
          <div v-if="item.subMenus" class="fold_tr">
            <div v-for="(ite, id) in item.subMenus" :key="id">
              <router-link :to="ite.url">{{ ite.name }}</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      second: false,
      menus: [
        {
          name: "首页",
          url: "/",
          subMenus: [],
          id: 0,
        },
        {
          name: "产业布局",
          url: "/layout",
          boole: false,
          id: 1,
          subMenus: [
           
          ],
        },
        {
          name: "关于槿椿",
          url: "/aboutJin",
          boole: false,
          id: 2,
          subMenus: [
            { name: "品牌介绍", url: "/aboutJin" },
            { name: "文化理念", url: "/aboutJin" },
            { name: "发展历程", url: "/aboutJin" },
            { name: "企业荣誉", url: "/aboutJin" },
            { name: "合作伙伴", url: "/aboutJin" },
          ],
        },
        {
          name: "槿椿特色",
          url: "/hibiscusindex",
          boole: false,
          id: 3,
          subMenus: [
            { name: "医养体系", url: "/hibiscusindex" },
            { name: "智养体系", url: "/hibiscusindex" },
            { name: "康养体系", url: "/hibiscusindex" },
            { name: "教养体系", url: "/hibiscusindex" },
            { name: "旅养体系", url: "/hibiscusindex" },
            { name: "乐养体系", url: "/hibiscusindex" },
          ],
        },
        {
          name: "槿椿资讯",
          url: "/jinchunindex",
          boole: false,
          id: 4,
          subMenus: [
            { name: "最新资讯", url: "/jinchunindex" },
            { name: "行业动态", url: "/jinchunindex" },
            { name: "视频槿椿", url: "/jinchunindex" },
            { name: "长者风采", url: "/jinchunindex" },
          ],
        },
        {
          name: "联系我们",
          url: "/contactusindex",
          boole: false,
          id: 5,
          subMenus: [
            { name: "入住体验", url: "/contactusindex" },
            { name: "志愿服务", url: "/contactusindex" },
            { name: "合作招商", url: "/contactusindex" },
            { name: "参观学习", url: "/contactusindex" },
          ],
        },
      ],
      routername: "首页",
    };
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
      this.routername = to.meta.biaoshi;
      for (const a of this.menus) {
        if (a.name == to.meta.biaoshi) {
          a.boole = false;
        }
      }
      this.second = false;
    },
  },
  methods: {
    //   开启and关闭菜单折叠
    foldMenu(e) {
      for (const a of this.menus) {
        a.boole = false;
      }
      this.second = !this.second;
    },
    // 二级菜单下拉
    secondaryMenu(e, value) {
      for (const a of this.menus) {
        if (a.id === value.id) {
          a.boole = !a.boole;
        } else {
          a.boole = false;
        }
      }
    },
  },
};
</script>
<style scoped>
/* .header { */
  /* position: relative; */
/* } */
.header_top {
  padding: 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  background: #fff;
  width: 37.5rem;
  z-index: 9999;
  top: 0;
}
.header_top div:nth-child(1) img {
  width: 10.4rem;
  height: 4.4rem;
  margin-left: 1.5rem;
}
.header_top div:nth-child(2) {
  /* z-index: 9999;
  width: 6.9rem;
  height: 3.2rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.5rem;
  line-height: 3.2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 1.6rem;
  font-weight: 400;
  margin-right: 1.5rem; */
  z-index: 9999;
  /* width: 6.9rem; */
  /* height: 3.2rem; */
  text-align: center;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.5rem;
  /* line-height: 3.2rem; */
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 1.6rem;
  font-weight: 400;
  margin-right: 1.5rem;
  padding: 0.6rem 2rem 0.6rem 2rem;
  display: flex;
}
.foldsrc{
  width: 1.6rem;
  height: 1.6rem;
}
.fold {
  /* width: 100%; */
  /* position: absolute; */
  /* text-align: center;
  bottom: 0px;
  transition: all 0.6s;
  transform: translate(0, -42rem);
  transform: translate(0, 37rem); */
  z-index: 112;
  background: #fff;
  height: 37rem;
  width: 100%;
  position: fixed;
  text-align: center;
  bottom: 0px;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform: translate(0, -42rem);
  transform: translate(0, -32rem);
  /* transform: translate(0, 37rem); */
  top: -10.5rem;
}
.fold_div {
  width: 100%;
  /* height: 6rem; */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 6rem;
  background: #fff;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.5rem;
  position: relative;
}
.fold_tr {
  transition: all 0.6s;
}
.fold_tr div {
  background: rgba(0, 0, 0, 0.04);
  border: 0 !important;
}
.fold_trigger {
  color: rgba(213, 16, 16, 1) !important;
  font-weight: bold;
  font-size: 1.5rem !important;
}
.fold img {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  right: 11rem;
  top: 2.4rem;
}
</style>